JS - creating art using CSS

revision:

Border-radius - shapes

default
1
2
3
4
5
6
7
8
code: 
                <div class = "wrapper">
                    <div class="default">default</div>
                    <div class="shapes">
                        <div id="example1">1</div>
                        <div id="example2">2</div>
                        <div id="example3">3</div>
                        <div id="example4">4</div>
                        <div id="example5">5</div>
                        <div id="example6">6</div>
                        <div id="example7">7</div>
                        <div id="example8">8</div>
                    </div> 
                </div>
                <style>
                    .wrapper{max-width: 40vw;font-family: Tahoma, sans-serif;} 
                    .default{display: flex; width: 8vw; height: 8vw; border: 0.2vw solid blue; background-color: seagreen; 
                        color: white; }
                    .shapes{display: flex; flex-flow: row wrap;}
                    .shapes>div{width: 8vw; height: 8vw; background:orange; margin: 1vw; border: 0.2vw dashed green; 
                        margin: 1vw;}
                    #example1{border-radius: 50%;}
                    #example2{border-radius: 2vw 25% 50% 1.2vw;}
                    #example3{border-radius: 69% 31% 28% 72% / 58% 55% 45% 42%;} 
                    #example4{border-radius: 60% 60%  10% 10%;}
                    #example5{border-radius: 6vw 6vw 1vw 1vw / 13vw 13vw 2vw 2vw;}
                    #example6{border-radius: 16vw 15vw 14vw 13vw;}
                    #example7{border-top-right-radius: 6vw; border-top-left-radius: 6vw; border-bottom-left-radius: 12vw; 
                        border-bottom-right-radius: 10vw;}
                    #example8{border-top-right-radius: 6%; border-top-left-radius: 6%; border-bottom-left-radius: 12%; 
                        border-bottom-right-radius: 10%;}
                </style>

Box-shadow - shapes

default

a
b
c
d
e
f
g
h
code: 
                <div class = "wrapper_a">
                    <div class="default_a">default</div><br>
                    <div class="shapes_a">
                        <div id="example_a">a</div>
                        <div id="example_b">b</div>
                        <div id="example_c">c</div>
                        <div id="example_d">d</div>
                        <div id="example_e">e</div>
                        <div id="example_f">f</div>
                        <div id="example_g">g</div>
                        <div id="example_h">h</div>
                    </div> 
                    </div>
                </div>
                <style>
                    .wrapper_a{ max-width: 40vw;font-family: Tahoma,sans-serif;}
                    .default_a{display: flex; width: 8vw; height: 8vw; border: 0.2vw solid blue; 
                        background-color: seagreen; color: white; }
                    .shapes_a{display: flex; flex-flow: row wrap; justify-content: space-around;}
                    .shapes_a>div{width: 8vw; height: 8vw; background:orange; margin: 1vw 1vw 5vw 1vw;}
                    #example_a{box-shadow: 0.1vw 0.4vw 0.05vw aquamarine;}
                    #example_b{box-shadow: 1.6vw -1.6vw 0.5vw teal;}
                    #example_c{box-shadow: inset -0.8vw -0.8vw 0.2vw 1vw gold;}
                    #example_d{box-shadow: -1vw -1vw 0.5vw 0.2vw indigo}
                    #example_e{box-shadow: -1vw -1vw 0.5vw 0.2vw inset indigo}
                    #example_f{box-shadow: 0.5vw 0.5vw 0.4vw 0.3vw green, -0.5vw -0.5vw 0.3vw 0.1vw green, 
                        1vw 1vw 0.5vw inset yellow;}
                    #example_g{box-shadow: 1vw -1.5vw 0.3vw 0.1vw blue, -1vw -1.5vw 0.3vw 0.1vw red, 
                        -1vw 1.5vw 0.3vw 0.1vw inset black,-1vw -1.5vw 0.3vw 0.2vw inset pink;}
                    #example_h{box-shadow: -1vw 3.2vw 0 -1.4vw brown, -2vw -4.2vw 0 -2vw maroon, 
                        3.2vw 3.1vw 0 -3.1vw black, -4vw -5.2vw 0 -4vw blue,    1.6vw 2.4vw 0 -2vw purple;}
                </style>

clip-path

default

aa
bb
cc
dd
ee
ff
gg
hh
code: 
                div class = "wrapper_c">
                <div class="default_c">default</div><br>
                <div class="shapes_c">
                    <div id="example_aa">aa</div>
                    <div id="example_bb">bb</div>
                    <div id="example_cc">cc</div>
                    <div id="example_dd">dd</div>
                    <div id="example_ee">ee</div>
                    <div id="example_ff">ff</div>
                    <div id="example_gg">gg</div>
                    <div id="example_hh">hh</div>
                </div> 
            </div>
            <style>
                .wrapper_c{ max-width: 40vw;font-family: Tahoma,sans-serif;}
                .default_c{display: flex; width: 8vw; height: 8vw; border: 0.2vw solid blue; background-color: seagreen; 
                    color: white; }
                .shapes_c{display: flex; flex-flow: row wrap; justify-content: space-around;}
                .shapes_c>div{width: 8vw; height: 8vw; background:orange; margin: 1vw 1vw 5vw 1vw; 
                    text-align: center;}
                #example_aa{clip-path: circle(50%);} 
                #example_bb{clip-path: ellipse(70% 50%);} 
                #example_cc{clip-path: inset(-1vw -3vw 3vw 1vw);} 
                #example_dd{clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);}
                #example_ee{clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%,
                     10% 20%);}
                #example_ff{clip-path: polygon(38% 34%, 100% 55%, 75% 100%, 0 100%);}
                #example_gg{clip-path: path("M50 0 L60 100 L300 100 Z");}
                #example_hh{clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%,
                     32% 57%, 2% 35%, 39% 35%)}
              </style>
            </pre>

gradient

default

ab
bc
cd
de
ef
fg
gh
hi
code:

some examples

some cakes

code: 
                <div>
                    <div class="container">
                        <div class="dessert dessert-y">
                          <div class ="cup"></div>
                          <div class="cake chocolate"></div>
                          <div class ="icing icing-strawberry">
                              <div class="layer1"></div>
                              <div class="layer2"></div>
                              <div class="layer3"></div>
                          </div>
                        </div>
                        <div class="dessert dessert-b">
                          <div class ="cup"></div>
                          <div class="cake vanilla"></div>
                          <div class ="icing icing-chocolate">
                              <div class="layer1"></div>
                              <div class="layer2"></div>
                              <div class="layer3"></div>
                          </div>
                          <div class="topping"></div>
                        </div>
                        <div class="dessert dessert-g">
                          <div class ="cup"></div>
                          <div class="cake vanilla"></div>
                          <div class ="icing icing-caramel">
                              <div class="layer1"></div>
                              <div class="layer2"></div>
                              <div class="layer3"></div>
                          </div>
                        </div>
                        <div class="dessert dessert-r">
                          <div class ="cup"></div>
                          <div class="cake "></div>
                          <div class ="icing icing-cream">
                              <div class="layer1"></div>
                              <div class="layer2"></div>
                              <div class="layer3"></div>
                          </div>
                        </div>
                      </div>
                </div>
                <style>
                    .container {height: 80vh; width:50vw; max-width: 80%; position: relative; top: 30%; left: 50%; transform: translate(-50%, -50%); 
                        display: flex; flex-flow: column nowrap;}
                    @media only screen and (max-width: 40vw) {
                      .container {flex-wrap: wrap; height: 100%;}
                    }
                    .dessert { position: relative;  width: 25%;  height: 50%;  display: flex; flex-direction: column; align-items: center;}
                    @media only screen and (max-width: 40vw) {
                      .dessert { width: 50%;}
                    }
                    .dessert::before {width: 8vw; height: 1vw; background: radial-gradient(ellipse at 45% 60%, #f0f1f4cc, transparent); 
                        border-radius: 50%;
                      bottom: 0;}
                    .dessert .cup {position: absolute; width: 7.8vw; height: 3.75vw; bottom: 0.5vw; background: lightblue; 
                        clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%); border-radius: 0.2vw 0.2vw 2vw 2vw; z-index: 2;}
                    .dessert.dessert-b .cup {background: radial-gradient(ellipse at 0% 0%, transparent 60%, rgba(0, 0, 0, 0.1) 70%), 
                        repeating-conic-gradient(at 50% 250%, rgba(255, 255, 255, 0.2) 0 1deg, rgba(255, 255, 255, 0.4) 0 2deg, 
                        rgba(255, 255, 255, 0) 0 3deg), linear-gradient(transparent 0.2vw, #40c6ff 0.2vw), radial-gradient(#40c6ff 50%, 
                        #73d5ff 51% 74%, transparent 75%) 0 0/0.5vw 0.5vw;}
                    @-moz-document url-prefix() {
                      .dessert.dessert-b .cup {background: radial-gradient(ellipse at 0% 0%, transparent 60%, rgba(0, 0, 0, 0.1) 70%), 
                        linear-gradient(transparent 0.2vw, #40c6ff 0.2vw), radial-gradient(#40c6ff 50%, #73d5ff 51% 74%, transparent 75%)
                         0 0/0.5vw 0.5vw;}
                    }
                    .dessert.dessert-g .cup {background: radial-gradient(ellipse at 0% 0%, transparent 60%, rgba(0, 0, 0, 0.1) 70%), 
                        repeating-conic-gradient(at 50% 250%, rgba(255, 255, 255, 0.2) 0 1deg, rgba(255, 255, 255, 0.4) 0 2deg, rgba(255, 
                        255, 255, 0) 0 3deg), linear-gradient(transparent 0.2vw, #06bb9c 0.2vw), radial-gradient(#06bb9c 50%, #08ecc5 51% 
                        74%, transparent 75%) 0 0/0.5vw 0.5vw;}
                    @-moz-document url-prefix() {
                      .dessert.dessert-g .cup {background: radial-gradient(ellipse at 0% 0%, transparent 60%, rgba(0, 0, 0, 0.1) 70%), 
                        linear-gradient(transparent 0.2vw, #06bb9c 0.2vw), radial-gradient(#06bb9c 50%, #08ecc5 51% 74%, transparent 75%)
                         0 0/0.5vw 0.5vw;}
                    }
                    .dessert.dessert-y .cup { background: radial-gradient(ellipse at 0% 0%, transparent 60%, rgba(0, 0, 0, 0.1) 70%), 
                        repeating-conic-gradient(at 50% 250%, rgba(255, 255, 255, 0.2) 0 1deg, rgba(255, 255, 255, 0.4) 0 2deg, rgba(255,
                         255, 255, 0) 0 3deg), linear-gradient(transparent 0.2vw, #ffcc6a 0.2vw), radial-gradient(#ffcc6a 50%, #ffdd9d 51% 
                         74%, transparent 75%) 0 0/0.5vw 0.5vw;}
                    @-moz-document url-prefix() {
                      .dessert.dessert-y .cup {background: radial-gradient(ellipse at 0% 0%, transparent 60%, rgba(0, 0, 0, 0.1) 70%), 
                        linear-gradient(transparent 0.2w, #ffcc6a 0.2vw), radial-gradient(#ffcc6a 50%, #ffdd9d 51% 74%, transparent 75%) 0 
                        0/0.5vw 0.5vw;}
                    }
                    .dessert.dessert-r .cup { background: radial-gradient(ellipse at 0% 0%, transparent 60%, rgba(0, 0, 0, 0.1) 70%), 
                        repeating-conic-gradient(at 50% 250%, rgba(255, 255, 255, 0.2) 0 1deg, rgba(255, 255, 255, 0.4) 0 2deg, rgba(255, 
                        255, 255, 0) 0 3deg), linear-gradient(transparent 0.2vw, #88011d 0.2vw), 
                        radial-gradient(#88011d 50%, #bb0128 51% 74%, transparent 75%) 0 0/0.5vw 0.5vw;}
                    @-moz-document url-prefix() {
                      .dessert.dessert-r .cup {background: radial-gradient(ellipse at 0% 0%, transparent 60%, rgba(0, 0, 0, 0.1) 70%), 
                        linear-gradient(transparent 0.2vw, #88011d 0.2vw), radial-gradient(#88011d 50%, #bb0128 51% 74%, transparent 75%)
                         0 0/0.5vw 0.5vw;}
                    }
                    .dessert .cake {position: absolute;  width: 8vw; height: 2vw; bottom: calc(0.5vw + 3.75vw - 0.8vw); 
                        border-radius: 50%; background: linear-gradient(#805231 45%, #5b3a23 55%);}
                    .dessert .cake.vanilla {background: linear-gradient(#e7ac4e 45%, #e19721 55%);}
                    .icing { position: absolute;bottom: calc(3.75vw + 1.2vw); display: flex; flex-direction: column-reverse; 
                        align-items: center;}
                    .icing.icing-strawberry .layer1, .icing.icing-strawberry .layer2, .icing.icing-strawberry .layer3 { background: 
                        linear-gradient(#fce3e7 70%, #f28798 98%, #ca1633); box-shadow: inset -.8vw -.8vw rgba(202, 22, 51, 0.08); }
                    .icing.icing-chocolate .layer1, .icing.icing-chocolate .layer2, .icing.icing-chocolate .layer3 { background: 
                        linear-gradient(#805231 70%, #362315 98%, black); box-shadow: inset -.8vw -.8vw rgba(0, 0, 0, 0.08);}
                    .icing.icing-caramel .layer1, .icing.icing-caramel .layer2, .icing.icing-caramel .layer3 {background: 
                        linear-gradient(#ebc6a8 70%, #d89055 98%, #78451c); box-shadow: inset -.8vw -.8vw rgba(120, 69, 28, 0.08);}
                    .icing.icing-cream .layer1, .icing.icing-cream .layer2, .icing.icing-cream .layer3 {background: 
                        linear-gradient(#e7e3d7 70%, #c1b697 98%, #776b48); box-shadow: inset -.8vw -.8vw rgba(119, 107, 72, 0.08);}
                    .icing .layer1 {width: 7.6vw; height: 1.2vw; border-radius: 1vw; position: relative;}
                    .icing .layer2 {width: 6.8vw;  height: 1.8vw; border-radius: 1.2vw 1.2vw 0.5vw 0.5vw; position: relative; 
                        bottom: -0.2vw;}
                    .icing .layer3 {width: 5.2vw; height: 2vw; border-radius: 150% 20% 30% 50%;  position: relative; 
                        bottom: -0.8vw;}
                    .icing .layer1::before, .icing .layer2::before, .icing .layer3::before { content: ""; position: absolute; 
                    width: 42%; height: 25%;    border-radius: 50%; box-shadow: 0.5vw 0.6vw 0 0 #ffffff16;}
                    .dessert-y > .icing .layer2, .dessert-y > .icing .layer3 { display: none;}
                    .dessert-y > .icing .layer1 {width: 8vw; height: 2vw; background: repeating-radial-gradient(circle at -25% -550%, 
                        white, #fce3e7 0.08vw, #f7b5c0 0.4vw, #f28798 0.6vw);}
                    .dessert-y > .icing .layer1::after {content: "";position: absolute; width: 2.5vw;height: 3.2vw;left: 2.4vw;
                    bottom: calc(3.2vw - 1.8vw - 0.6vw);background: #dd3d3d;border-radius: 29% 26% 45% 63%/32% 25% 70% 71%; 
                    transform: rotate(-64deg); background-image: radial-gradient(ellipse at 50% 0%, #e3a31c 10%, #ca1633 12% 20%, 
                    transparent 20%); background-size: 0.9vw 0.9vw; box-shadow: inset 0.4vw -0.5vw rgba(0, 0, 0, 0.15);}
                   .dessert-y > .icing .layer2, .dessert-y > .icing .layer2::before {all: unset; position: absolute; width: 0.8vw;
                     height: 1.2vw;left: 1.6vw; bottom: calc(3.2vw - 0.8vw); border-radius: 1vw 0; background: #608d36; 
                     transform: rotate(15deg); box-shadow: inset -0.2vw 0vw rgba(0, 0, 0, 0.15);}
                   .dessert-y > .icing .layer2::before {content: "";left: 0.3vw; top: -0.6vw; transform: rotate(125deg) scale(0.7);
                    box-shadow: inset 0.2vw 0vw rgba(0, 0, 0, 0.15);}
                   .dessert-b > .icing .layer3::after {content: ""; position: absolute; width: 2.5vw; height: 3.2vw; background: white; 
                   transform: rotate(50deg); border-radius: 50%; right: 1.2vw; top: -1.2vw;  z-index: -1; 
                   box-shadow: 1vw 0 0 0.5vw #805231;}
                   .dessert-g > .icing .layer3 {height: 2.4vw; width: 5.6vw; border-radius: 2vw 2vw 0.4vw 0.4vw; 
                    background: linear-gradient(#805231 70%, #362315 98%, black); box-shadow: inset -8px -8px rgba(0, 0, 0, 0.08); }
                    .dessert-g > .icing .layer3::after {content: ""; position: absolute; width: 1vw; height: 2.8vw; 
                    background: linear-gradient(transparent 10%, #805231 20%, #5b3a23 28%, black 36%, #362315 46%); bottom: -1.6vw; 
                    right: 1.8vw; border-radius: 2vw; box-shadow: 1vw 0.8vw 0 -0.2vw #362315, 1.8vw 0.5vw 0 -0.1vw #362315;}
                   .dessert-r > .icing .layer3 {height: 1.8vw;border-radius: 1vw;}
                   .dessert-r > .icing .layer3::after { content: ""; width: 2.8vw;  height: 2.4vw;  border-radius: 50%; 
                   left: calc(2.6vw - 1vw);  top: -1.4vw; transform: rotate(-25deg); background-image: 
                   radial-gradient(ellipse at 92% 40%, #ed0233, #bb0128 20%, #88011d 59%, #e7e3d7 40%); 
                   box-shadow: 1.02vw -2.18vw 0 0.4vw white, 1.1vw -2vw 0 0.3vw #88011d;}
                    /* above to be checked*/
                   .dessert-b::after {content: ""; position: relative; position: absolute; width: 2vw; height: 3.6vw; 
                   bottom: calc(0.5vw + 3.75vw + 1.2vw + 1.8vw + 2vw - 2.4vw);left: calc(50% + 2vw);transform: rotate(24deg); z-index: -2; 
                   background: radial-gradient(circle at 50% 0, #5b3a23 60%, transparent) 0 0/0.9vw 0.3vw, radial-gradient(circle at 50% 0,
                    #5b3a23 60%, transparent) 1.05vw 0/0.9vw 0.3vw, linear-gradient(to right, #dbbaa2 0.02vw, #ffffff01 0.1vw, 
                    transparent 0.3vw 0.9vw, #bf8358 0.9vw 0.92vw, white 0.95vw 1.05vw, #bf8358 1.05vw 1.07vw, #ffffff01 1.15vw,
                     transparent 1.35vw), repeating-linear-gradient(#805231, #805231 0.4vw, #e7e3d7 0.4vw, #e7e3d7 0.6vw); 
                     border-radius: 2px; background-repeat: no-repeat;}
                   .dessert-g::after { content: ""; position: relative; position: absolute; width: 2.4vw; height: 3.6vw; 
                   bottom: calc(0.5vw + 3.75vw + 1.2vw + 1.8vw + 2vw - 1.2vw);  left: calc(50% - 0.8vw); background: black; 
                   border-radius: 50%; box-shadow: -0.3vw 0 #e7e3d7, -0.8vw 0 black;   transform: rotate(-20deg);z-index: -2; 
                   background-repeat: no-repeat;}
                </style>